<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>New Order</title>
  <link rel="stylesheet" type="text/css" href="/static/css/dining.css" />
</head>
<body>
<header th:replace="common/top"></header>
<div id="Catalog">
  <form action="/confirmOrderForm" method="post">
    <table>
      <tr>
        <th colspan="2">Payment Details</th>
      </tr>
      <tr>
        <td>Card Type:</td>
        <td>
          <select name="order.cardType" id="order.cardType">
            <option value="VISA">VISA</option>
            <option value="JBC">JBC</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Card Number:</td>
        <td><input type="text" name="order.creditCard" th:value="${order != null ? order.creditCard : ''}" /></td>
      </tr>
      <tr>
        <td>Total Price:</td>
        <td><input type="text" name="order.totalPrice" th:value="${order != null ? order.totalPrice : ''}" /></td>
      </tr>
      <tr>
        <td>Expiry Date (MM/YYYY):</td>
        <td><input type="text" name="order.expiryDate" th:value="${order != null ? order.expiryDate : ''}" /></td>
      </tr>
      <tr>
        <th colspan="2">Billing Address</th>
      </tr>

      <tr>
        <td>First name:</td>
        <td><input type="text" name="order.billToFirstName" th:value="${loginAccount != null ? loginAccount.firstName : ''}" /></td>
      </tr>
      <tr>
        <td>Last name:</td>
        <td><input type="text" name="order.billToLastName" th:value="${loginAccount != null ? loginAccount.lastName : ''}" /></td>
      </tr>
      <tr>
        <td>Address 1:</td>
        <td><input type="text" size="40" name="order.billAddress1" th:value="${loginAccount != null ? loginAccount.address1 : ''}" /></td>
      </tr>
      <tr>
        <td>Address 2:</td>
        <td><input type="text" size="40" name="order.billAddress2" th:value="${loginAccount != null ? loginAccount.address2 : ''}" /></td>
      </tr>
      <tr>
        <td>City:</td>
        <td><input type="text" name="order.billCity" th:value="${loginAccount != null ? loginAccount.city : ''}" /></td>
      </tr>
      <tr>
        <td>State:</td>
        <td><input type="text" size="4" name="order.billState" th:value="${loginAccount != null ? loginAccount.state : ''}" /></td>
      </tr>
      <tr>
        <td>Zip:</td>
        <td><input type="text" size="10" name="order.billZip" th:value="${loginAccount != null ? loginAccount.zip : ''}" /></td>
      </tr>
      <tr>
        <td>Country:</td>
        <td><input type="text" size="15" name="order.billCountry" th:value="${loginAccount != null ? loginAccount.country : ''}" /></td>
      </tr>

      <tr>
        <td colspan="2">
          <input type="checkbox" name="shippingAddressRequired" />
          Ship to different address...
        </td>
      </tr>
    </table>

    <input type="submit" name="newOrder" value="Continue" />
  </form>
</div>

</body>
</html>